<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>平价手机商城</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body style="padding-top: 70px;padding-left: 5px;">

    <!--1.页面导航条-开始-->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">首页</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">在售手机 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">配件</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">周边商品 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">手机壳</a></li>
                <li><a href="#">手机膜</a></li>
                <li><a href="#">其他配饰</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">耳机</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">充电宝</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="搜索">
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">配件</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">周边商品 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">手机壳</a></li>
                <li><a href="#">手机膜</a></li>
                <li><a href="#">其他配饰</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">耳机</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">充电宝</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <!--1.页面导航条-结束-->

    <!--2.页面容器（主体）-开始-->
    <div class="container-fluid">
      <div class="row">

        <!--页面左侧主体开始-->
        <div class="col-md-9">
            <ol class="breadcrumb">
              <span class="glyphicon glyphicon-send" aria-hidden="true"> </span>
			  <li><a href="#">主页</a></li>
			  <li><a href="#">手机</a></li>
			  <li class="active">在售</li>
			</ol>
          <div class="jumbotron">
            <h2>买手机 到平价手机商城！</h2>
            <p>覆盖最全面的手机产品，提供贴心的优质服务，享受品牌专卖店的平价价格，选我们绝对没错！！</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">查看更多</a></p>
          </div>

          <div class="row">
            <div class="col-xs-6 col-lg-4">
              <img src="./images/phones- (1).png" title="华为" width="250px" >
              <p>这是一个华为手机 </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <img src="./images/phones- (4).png" title="华为" width="200px" >
              <p>这是一个苹果手机 </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <img src="./images/phones- (3).png" title="华为" width="200px" >
              <p>这是一个三星手机 </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <img src="./images/phones- (4).png" title="华为" width="200px" >
              <p>这是一个苹果手机 </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <img src="./images/phones- (1).png" title="华为" width="250px" >
              <p>这是一个苹果手机 </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <img src="./images/phones- (4).png" title="华为" width="200px" >
              <p>这是一个华为手机 </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
          </div><!--/row-->
          <!--分页信息-->
	      <nav aria-label="Page navigation" class="text-center">
			  <ul class="pagination">
			    <li>
			      <a href="#" aria-label="Previous">
			        <span aria-hidden="true">&laquo;</span>
			      </a>
			    </li>
			    <li><a href="#">1</a></li>
			    <li class="active"><a href="#">2</a></li>
			    <li><a href="#">3</a></li>
			    <li><a href="#">4</a></li>
			    <li><a href="#">5</a></li>
			    <li>
			      <a href="#" aria-label="Next">
			        <span aria-hidden="true">&raquo;</span>
			      </a>
			    </li>
			  </ul>
			</nav>
			<!--分页信息-->
        </div>

        
      

        <!--页面左侧主体结束-->

        <!--页面右侧侧边栏开始-->
        <div class="col-md-3">
          <div class="list-group">
            <button type="button" class="list-group-item active"><span class="badge">16</span>销量冠军手机</button>
            <button type="button" class="list-group-item"><span class="badge">52</span>关注度前十排行手机</button>
            <button type="button" class="list-group-item"><span class="badge">7</span>性价比之王</button>
            <button type="button" class="list-group-item"><span class="badge">112</span>本月促销</button>
            <button type="button" class="list-group-item"><span class="badge">140</span>限量款手机</button>
          </div>
        </div>
        <!--页面右侧侧边栏结束-->

      </div>
		
		<hr>
		<footer>
			<p class="text-center">&copy; Company 2018</p>
		</footer>
    </div>
    <!--2.页面容器（主体）-结束-->

    
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>